<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<html>
<head>
    <title>My</title>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.6.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/modal/bootstrap-4.6.0-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<%--    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"--%>
<%--            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"--%>
<%--            crossorigin="anonymous"></script>--%>
</head>

<body ng-app="apps">

<div class="container" ng-controller="my">
    <div class="page-header">
        <h1>我的购物车</h1>
    </div>
    <div class="row">
        <div>
            <a class="btn btn-success" href="${pageContext.request.contextPath}/customer/home">返回首页</a>
        </div>
    </div>
    <table class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <td>名称</td>
            <td>价格</td>
            <td>数量</td>
            <td>方式</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <form>
            <c:forEach items="${itemList}" var="one" varStatus="sta">
                <tr ng-repeat="m in cart">
                    <td>${one.menusName}</td>
                    <td id="${one.menusId}">${one.menusPrice}</td>
                    <td>
                        <input id = "reduce_num" class="btn btn-primary" value="-" style="width: 40px" type="button" onclick="red()">
                        <input class="scroll-txt" type="text" value="1" readonly style="width: 30px;">
                        <input class="btn btn-primary" id="add_num" value="+" style="width: 40px" type="button" onclick="add()">
                    </td>
                    <td>
                        <select name="" id="">
                            <option value="">到店</option>
                            <option value="">外卖</option>
                        </select>
                    </td>
                    <td>
                        <a href="javascript:void(0);" class="btn btn-info" onclick="shanchu('${one.menusName}')">删除</a>
<%--                        <a href="${pageContext.request.contextPath}/detailOrder/deleteList" class="btn">删除</a>--%>
                    </td>
                </tr>
                <tr>
                    <td colspan="1"><span>￥<span class="allMoney">${one.menusPrice}</span></span></td>
                    </td>
                </tr>
            </c:forEach>
        </form>
        <input type="submit" value="购买" class="btn btn-danger" onclick="byShop()">
        </tbody>

    </table>

</div>
<script>
    function shanchu(name){
        $.ajax({
            url:"${pageContext.request.contextPath}/detailOrder/deleteList",
            type:"post",
            data:({mename:name}),
            success:function (re){alert("Yes")},
        })
    }
    function byShop(){
        alert("购买成功");
    }
    function red(){
        if ($("#reduce_num").next().text()>1){
            var i = $("#reduce_num").next().text() - 1
            $("#reduce_num").next().text(i)
        }
    }
    function add(){
        var a = $("#reduce_num").prev().text() + 1
        $("#reduce_num").prev().text(a)
    }
    $("#reduce_num").click(function () {
        ///然后声明一个cont接收同级元素，这里的this指向获取到的dom元素，next表示下一个同级元素，
        let cont = $(this).next();
        //先给一个判断，如果cont元素的value值已经是0了，做出判断，return出去不执行下面的减1操作，如果大于1则执行下面的方法，这里的parseInt是为了将页面中的value值（这个值是字符串的形式），转化成数字，方便实现加减操作
        if (parseInt(cont.val()) <= 1) return;
        cont.val(parseInt(cont.val()) - 1 );
        updateMoney();
    });
    //下面同理
    $("#add_num").click(function () {
        let conts = $(this).prev();
        conts.val(parseInt(conts.val()) + 1);
        updateMoney();
    })
    function updateMoney(){
        var t = $(this).parent().prev().text()
        // var price = document.getElementById("").innerText
        var tt = $(".scroll-txt").val();
        var total = t * tt;   //输入框中的份额数与每份金额数相乘得到总金额
        $(".allMoney").text(total);
    }
    function deleteList(name){
        $.ajax({
            url:"${pageContext.request.contextPath}/detailOrder/deleteList",
            type:"post",
            data:({
                mename:name
            }),
            success:function (result){
                alert("Yes")
            },
            error:function (err){
                alert("No")
            }
        })
    }
</script>
</body>
</html>